<template>
  <div class="box">
    <van-nav-bar title="患者案例" />
    <!-- 点击搜索框跳转到搜索页面 -->
    <van-search placeholder="请输入搜索关键词" stick @click="toSearch" />
    <!-- tab切换效果实现 -->
    <van-config-provider theme="tabs">
      <van-tabs v-model:active="active" sticky>
        <van-tab title="最新">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
             <div class="caselist" v-for="(item, inde) in SPcaselist" :key="inde">
            <div class="header">
              <div class="headTop">
                <div class="headTopLeft">
                  <div>
                    <img class="headimg" v-lazy="item.avatar" alt="" />
                  </div>
                </div>
                <div class="headTopRight">
                  <div class="headname">
                    <span class="name">{{ item.name }}</span>
                    <span class="position">{{ item.type }}</span>
                  </div>
                  <div class="headaddr">
                    <span>首都医科大学宣武医院</span>
                  </div>
                </div>
              </div>
              <div class="headBottom"></div>
            </div>
            <div class="main" @click="toCaseDetail(item)">
              <div class="mainTop">
                <p>{{ item.title }}</p>
              </div>
              <div class="mainMain">
                <div class="caseimg" v-show="item.content.length == 1">
                  <div>
                    <img class="img9" v-lazy="item.content[0].img" alt="" />
                  </div>
                </div>
                <div class="imgtap" v-show="item.content.length == 2">
                  <div>
                    <img class="img10" v-lazy="item.content[0].img" alt="" />
                  </div>
                  <div>
                    <img class="img11" v-lazy="item.content[0].img" alt="" />
                  </div>
                </div>
                <div class="caseimg" v-show="item.content.length == 3">
                  <div>
                    <img class="img1" v-lazy="item.content[0].img" alt="" />
                  </div>
                  <div>
                    <img class="img2" v-lazy="item.content[0].img" alt="" />
                  </div>
                  <div>
                    <img class="img3" v-lazy="item.content[0].img" alt="" />
                  </div>
                </div>
                <div class="caseimg1" v-show="item.content.length == 4">
                  <div class="imgtap">
                    <div>
                      <img class="img5" v-lazy="item.content[0].img" alt="" />
                    </div>
                    <div>
                      <img class="img6" v-lazy="item.content[0].img" alt="" />
                    </div>
                  </div>
                  <div class="imgtap">
                    <div>
                      <img class="img7" v-lazy="item.content[0].img" alt="" />
                    </div>
                    <div>
                      <img class="img8" v-lazy="item.content[0].img" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="mainBottom">
                <div class="caseellipsis">
                  <van-text-ellipsis :content="item.content[0].cpap" :rows="2" />
                </div>

                <!-- 案例 -->
                <div class="caseli">{{ item.cases }}·案例</div>
                <div></div>
              </div>
            </div>
            <div class="footer">
              <div>
                <span>
                  <van-icon name="eye-o" size="55" />
                </span>
                <span>{{ item.browse }}</span>
              </div>
              <div>
                <span>
                  <van-icon name="star-o" size="55" />
                </span>
                <span>{{ item.collect }}</span>
              </div>
              <div>
                <span>
                  <van-icon name="like-o" size="55" />
                </span>
                <span>{{ item.praise }}</span>
              </div>
            </div>
          </div>
             
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="最热">
           <virtualist :listData="SPcaselist" :itemSize="100"></virtualist>
        </van-tab>
      </van-tabs>
    </van-config-provider>
    <div class="release" @click="toPublish">
      <img src="../../assets/img/编辑.png" alt="" />
    </div>
  
  </div>
</template>
<script setup lang="ts">
// 患者案例样式
import { ref, reactive, onMounted, onUpdated } from "vue";
import "./index.css";
import { useRouter } from "vue-router";
import axios from "axios";
import  virtualist from '../../components/caselist/index.vue'
const router = useRouter();
const img = ref(3);
// 点击搜索框跳转到搜索页面
const toSearch = () => {
  router.push("/caseSearch");
};
// 第几页
const pageCode = ref(0);
// 每一页的数据量
const pageSize = ref(5);
// 患者案例所有数据
const caselist = ref([]);
// 截取10条用作上拉加载数据
const SPcaselist = ref([]);
const getCaseList = async () => {
  // 调用接口获取数据
  await axios.get("/api/case").then((res) => {
    caselist.value = res.data.data;
    SPcaselist.value = caselist.value.slice(
      (pageCode.value - 1) * pageSize.value,
      pageCode.value * pageSize.value
    );
  });
};
getCaseList();

// 点击跳转到案例详情
const toCaseDetail = (item) => {
  console.log(item);
  const val = encodeURIComponent(JSON.stringify(item));
  router.push(`/caseDetail?item=` + val);
};

// 上拉加载更多
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  // 异步更新数据
  pageCode.value = pageCode.value + 1;
  pageCode.value + 1;
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    const addlist = caselist.value.slice(
      (pageCode.value - 1) * pageSize.value,
      pageCode.value * pageSize.value
    );
    SPcaselist.value = [...SPcaselist.value, ...addlist];
    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (SPcaselist.value.length >= 20) {
      finished.value = true;
    }
  }, 1000);
};

// 下拉刷新
const refreshing = ref(false);
const onRefresh = () => {
  //  重新请求接口
  getCaseList();
  onLoad();
};

// 点击星星收藏
const star = (item) => {
  axios.get("/api/collectstate?id=" + item.id).then((res) => {
    getCaseList();
  });
};
// 点击爱心喜欢
const like = (item) => {
  axios.get("/api/praisestate?id=" + item.id).then((res) => {
    getCaseList();
  });
};
onUpdated(() => {
  getCaseList();
});

const toPublish = () => {
  router.push("/Publish");
  
};


</script>

